<template>
  <view class="register">

    <view class="avatar-box">
      <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <image class="avatar"
               :src="avatarUrl"></image>
      </button>
    </view>

    <view class="row">
      <view class="text1">昵称：</view>
      <input type="nickname" class="weui-input" v-model="nickName" placeholder="请输入昵称" maxlength="6" @blur="onNickName"/>
    </view>

<!--    <button open-type="getPhoneNumber" :disabled="code" style="width: 80%;background-color: #fdfdfd;color: #a07fa0;margin-top: 20rpx;font-size: 24rpx;height: 60rpx" @getphonenumber="getPhoneNumber">{{code == ''?'微信一键绑定手机号':'绑定成功'}}</button>-->

    <view class="btn-box">
      <u-button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" :loading="isLoading" shape="circle" :custom-style="customStyle"  >授权手机号一键注册</u-button>
    </view>

    <u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>

<script>
import {getCode, getPhone, wx_login, wx_register} from "../../api/login";
import {pathToBase64} from "image-tools";
export default {
  name: "index",
  data() {
    return {
      nickName: '',
      avatarUrl: '',
      isLoading:false,
      haveAvatar:false,
      customStyle: {
        margin: '0rpx auto', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: '#fff',
        backgroundColor: '#2bdb70',
        width: '80%'
      },
    }
  },
  methods: {
    onLoad() {

    },
    onChooseAvatar(e) {
      pathToBase64(e.detail.avatarUrl).then(data=>{
        this.avatarUrl = data
      })
    },
    async getPhoneNumber(e) {
      let errMsg = e.detail.errMsg
      if (errMsg.indexOf("fail") !== -1) {
      }else{
        if (this.nickName !== '' && this.code!='' ) {
          this.isLoading = true
          const {code} = await getCode()
          // const phone = await getPhone({code:this.code})
          const registerMsg = await wx_register(code,{
            avatar:this.avatarUrl,
            nickname:this.nickName
          })
          if (registerMsg.data.data == '注册成功'){
            const {code} = await getCode()
            const loginMsg = await wx_login(code)
            uni.setStorageSync('token', loginMsg.data.data.token);
            uni.setStorageSync('userInfo', loginMsg.data.data.user);
            const phone = await getPhone({code:e.detail.code})
            uni.showToast({
              title: '注册成功',
              duration: 3000,
              icon:'none',
            });
            this.isLoading = false
            setTimeout(()=>{
              uni.switchTab({url: '/pages/Home/Home'})
              this.isLoading = false
            },1000)
          }else{
            this.$refs.uTips.show({
              title: '注册失败',
              type: 'error',
              duration: '3000'
            })
            this.isLoading = false
          }
        } else {
          this.$refs.uTips.show({
            title: '请完善注册信息',
            type: 'error',
            duration: '2300'
          })
        }
      }

    },
    onNickName(e) {
      this.nickName = e.detail.value
    },
  }
}
</script>

<style lang="scss" scoped>
.register {
  .avatar-box {

    .avatar-wrapper {
      padding: 0rpx;
      margin-top: 80rpx;
      margin-bottom: 80rpx;
      width: 100rpx !important;
      height: 100rpx;

      .avatar {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }

  .row {
    border-top: 1px solid #F6F6F7;
    border-bottom: 1px solid #F6F6F7;
    display: flex;
    align-items: center;
    height: 90rpx;
    padding-left: 20rpx;
  }

  .text1 {
    font-weight: bold;
    flex: 2;
  }

  .weui-input {
    flex: 6;
  }

  .btn-box {
    margin-top: 80rpx;
  }
}

</style>
